<template>
  <div>
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="车辆类型">
          <el-select v-model="formInline.truckTypeId" placeholder="请选择">
            <el-option label="4.2米箱式货车" value="shanghai"></el-option>
            <el-option label="12.8米箱式货车" value="shanghai"></el-option>
            <el-option label="6.8米箱式货车" value="shanghai"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆号码">
          <el-input
            v-model="formInline.licensePlate"
            placeholder="请输入车辆号码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="sousuo" @click="onSubmit"
            >搜索</el-button
          >
          <el-button type="primary" class="chongzhi" @click="chongzhi"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="list">
      <el-button class="button" size="medium" @click="quanxuan"
        >全部{{ num1 + num2 }}</el-button
      >
      <el-button size="medium" class="button" @click="keyong"
        >可用{{ num1 }}</el-button
      >
      <el-button size="medium" class="button" @click="tingyong">
        停用{{ num2 }}</el-button
      >
    </div>
    <div>
      <div>
        <button @click="button" class="buttons">新增车辆</button>
      </div>
      <div>
        <el-table :data="listdata" style="width: 100%">
          <el-table-column type="index" :index="indexFn" label="序号">
          </el-table-column>
          <el-table-column prop="licensePlate" label="车牌号码" width="180">
          </el-table-column>
          <el-table-column prop="truckTypeId" label="车辆类型" width="180">
          </el-table-column>
          <el-table-column prop="driverNum" label="司机数量"> </el-table-column>
          <el-table-column prop="status" label="车辆状态"> </el-table-column>
          <el-table-column prop="deviceGpsId" label="GPS设备ID">
          </el-table-column>
          <el-table-column prop="allowableLoad" label="实载数量(T)">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="实载体积(方)">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <div class="footerspan">
                <span @click="chakanBtn(row.id)">查看详情</span>
                <span>{{ listdata.status === '0' ? '停用' : '启用' }}</span>
                <span>配置司机</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page"
          :page-sizes="[1, 2, 3, 4, 5, 6, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 点击展开弹层 -->
    <el-dialog
      title="新增车辆"
      :visible="dialogVisible"
      width="30%"
      @close="dialogVisible = false"
    >
      <el-form
        :model="formList"
        status-icon
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="车辆类型">
          <el-select v-model="formList.truckTypeId" placeholder="请选择">
            <el-option label="4.2米箱式货车" value="shanghai"></el-option>
            <el-option label="12.8米箱式货车" value="shanghai"></el-option>
            <el-option label="6.8米箱式货车" value="shanghai"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码" prop="name">
          <el-input
            type="text"
            v-model="formList.licensePlate"
            auto-complete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" class="affirm" @click="querenList"
          >确认</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  StatisticalvehicleApi,
  StatisticlistApi,
  addStatisticlistApi
} from '@/api/registration'
export default {
  data() {
    return {
      formInline: {
        truckTypeId: '',
        licensePlate: ''
      },
      tableData: [],
      total: 0, // 数据总数
      page: 2,
      pageSize: 1,
      num1: '',
      num2: '',
      listdata: [],
      dialogVisible: false,
      tancengList: [],
      formList: [
        {
          allowableLoad: '',
          allowableVolume: '',
          brand: '',
          deviceGpsId: '',
          driverName: '',
          driverNum: '',
          id: '',
          licensePlate: '',
          status: '',
          transportLineName: '',
          truckLicenseId: '',
          truckTypeId: '',
          truckTypeName: []
        }
      ]
    }
  },
  async created() {
    this.most()
    this.PagingList()
  },
  methods: {
    //全选
    quanxuan() {
      this.PagingList()
    },
    //可用
    keyong() {
      const res = this.listdata.filter((item) => {
        if (item.status === 1) {
          return item
        }
      })
      this.listdata = res
    },
    //停用
    tingyong() {
      const res = this.listdata.filter((item) => {
        if (item.status === 0) {
          return item
        }
      })
      this.listdata = res
    },
    //点击重置
    chongzhi() {
      this.formInline = ''
      this.PagingList()
    },
    //点击搜索
    onSubmit() {
      const res = this.listdata.filter((item) => {
        if (item.truckTypeId == this.formInline.truckTypeId) {
          return (item.truckTypeId = this.formInline.truckTypeId)
        } else if (item.licensePlate == this.formInline.licensePlate) {
          return (item.licensePlate = this.formInline.licensePlate)
        } else {
          alert('抱歉，没有符合的数据')
        }
      })
      console.log(res)
      this.listdata = res
    },
    async most() {
      const { data } = await StatisticalvehicleApi()
      this.num1 = Number(data.data[0])
      this.num2 = Number(data.data[1])
    },
    //获取分页数据
    async PagingList() {
      const { data } = await StatisticlistApi(this.page, this.pageSize)
      this.listdata = data.data.items
      this.total = Number(data.data.pages)
      console.log(data)
    },
    //添加车辆
    async addStatisticlist() {
      const { data } = await addStatisticlistApi(this.formList)
      console.log(data)
    },
    handleSizeChange(val) {
      this.pageSize = val
      // 切换每页条数时，让页码回归到第一页
      this.page = 1
      this.PagingList()
      console.log(`每页 ${val} 条`)
    },
    // 当前页变化，改变当前页触发执行
    handleCurrentChange(val) {
      this.page = val
      this.PagingList()
      console.log(`当前页: ${val}`)
    },
    indexFn(index) {
      // 每页的index是递增的
      // 每页起始序号从0开始，所以先加1
      // 每页的第一条数据的序号 = 1 + （页码数 - 1） * 数据条数
      // 每页的第一条数据的序号 = 1 + 前面页的总数条数
      return index + 1 + (this.page - 1) * this.pageSize
    },
    //点击新增
    button() {
      this.dialogVisible = true
      console.log(111)
    },
    //点击确认
    querenList() {
      this.addStatisticlist()
    },
    //查看详情
    chakanBtn(id) {
      // this.$router.push('/name')
      // console.log(id)
      this.$router.push({ path: '/name', query: { id } })
    }
  }
}
</script>

<style scoped>
.type {
  float: left;
}
.list .button {
  width: 120px;
  height: 70px;
  border: 0;
  margin-right: 20px;
}
.buttons {
  background-color: #e15536;
  color: #fff;
  border: 0;
  margin-left: 15px;
  width: 150px;
  height: 50px;
  text-align: center;
  border-radius: 12px;
}

.affirm {
  background-color: #e15536;
  color: #fff;
  border: 0;
}
.footerspan span {
  display: block;
  float: left;
  margin-right: 3px;
  color: #419eff;
}
.sousuo {
  margin-left: 60px;
  width: 100px;
  background-color: #e15536;
  color: #fff;
  border: 0;
}
.chongzhi {
  width: 80px;
  background-color: #fff;
  color: black;
  margin-left: 30px;
  border: 1px solid rgb(242, 238, 238);
}
.top {
  margin-top: 20px;
}
</style>